<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dict">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item>
          <el-input
            v-model="dataForm.productName"
            placeholder="请输入商品名称"
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-form-item>
                <el-select v-model="dataForm.orderType" placeholder="请选择商品类型" clearable>
                    <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> -->
        <el-form-item>
          <el-input
            v-model="dataForm.guestName"
            placeholder="请输入联系人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="dataForm.guestPhone"
            placeholder="请输入联系方式"
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-form-item>
                <el-date-picker v-model="dataForm.orderTime" type="datetime" placeholder="下单时间" value-format="yyyy-MM-dd hh:mm:ss">
                </el-date-picker>
            </el-form-item> -->

        <!-- <el-form-item>
                <el-select v-model="dataForm.islandId" placeholder="所属区域" clearable style="width:100%">
                    <el-option v-for="item in scenicOptions" :key="item.id" :label="item.scenicName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item> -->

        <el-form-item>
          <el-select
            v-model="dataForm.orderStatus"
            placeholder="请选择状态"
            clearable
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getDataList()">{{
            $t("query")
          }}</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="exportHandle()">导出</el-button>
        </el-form-item> -->
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        @sort-change="dataListSortChangeHandle"
        style="width: 100%"
        :height="he"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="productImg"
          label="商品封面图"
          :show-overflow-tooltip="true"
          align="center"
          min-width="160px"
        >
          <template v-slot:default="scope">
            <el-image
              :src="scope.row.productImg && scope.row.productImg.split(',')[0]"
              style="max-height: 120px"
              v-if="scope.row.productImg"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="productName"
          label="商品名称"
          header-align="center"
          min-width="170"
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="orderType" label="商品类型" header-align="center" min-width="120" align="center">
                <template slot-scope="scope">
                    {{scope.row.orderType==0?'商品':'拼单'}}
                </template>
            </el-table-column> -->
        <el-table-column
          prop="orderCode"
          label="订单编号"
          header-align="center"
          min-width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="num"
          label="数量"
          header-align="center"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orderAmount"
          label="金额"
          header-align="center"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="guestName"
          label="客户姓名"
          header-align="center"
          min-width="120"
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="guestPhone" label="联系方式" header-align="center" min-width="120" align="center"></el-table-column> -->
        <el-table-column
          label="联系方式"
          header-align="center"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <i @click="showReal = scope.$index">{{
              scope.$index === showReal
                ? scope.row.realPhone
                : scope.row.guestPhone
            }}</i>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderTime"
          label="下单时间"
          header-align="center"
          width="160"
          align="center"
        >
        </el-table-column>
        <!--<el-table-column prop="islandName" label="所属区域" header-align="center" min-width="120" align="center">-->
        <!--<el-table-column prop="evaluateFlag" label="评价" header-align="center" min-width="120" align="center">-->
        <!--<template slot-scope="scope">-->
        <!--{{scope.row.evaluateFlag==0?'未评价':'已评价'}}-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column
          prop="orderStatus"
          label="订单状态"
          header-align="center"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span class="status">
              {{ statusType[scope.row.orderStatus] }}
              <p v-if="scope.row.orderStatus == 3">
                核销时间：{{ scope.row.writeOffTime }}
              </p>
            </span>
          </template>
        </el-table-column>

        <!-- <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="addOrUpdateHandle(scope.row.id)"
              >详情</el-button
            >
            <el-button
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      >
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 /详情-->
      <!-- <add-or-update
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getDataList"
      ></add-or-update> -->
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./order-add-or-update";

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/scenic/merchant/order/page",
        getDataListIsPage: true,
        exportURL: "/scenic/merchant/order/export",
      },
      he:'auto',
      dataForm: {
        productName: "",
        orderCode: "",
        orderTime: "",
        islandId: "",
        guestPhone: "",
        guestName: "",
        orderType: "",
        evaluateFlag: "",
        search: "",
        orderStatus: "",
        productImg: "",
        merchantId:
          this.$store.state.user.superAdmin == 1
            ? ""
            : this.$store.state.user.MerchantId,
      },
      statusColor: {
        0: "#FF4141",
        1: "#409EFF",
        2: "#CCCCCC",
        3: "#FF9C3D",
        4: "#AAAAAA",
      },
      statusType: {
        0: "待支付",
        "-1": "已取消",
        "-2": "退款中",
        "-3": "已退款",
        5: "已预约",
        3: "已核销",
        4: "待使用",
      },
      // 新增
      // type: [{
      //         label: "商品",
      //         value: 0,
      //     },
      //     {
      //         label: "拼单",
      //         value: 1,
      //     },

      // ],
      scenicOptions: [],
      // area: [{
      //         label: "大陆",
      //         value: 4,
      //     },
      //     {
      //         label: "港澳台",
      //         value: 1,
      //     },
      //     {
      //         label: "海外",
      //         value: 2,
      //     },
      // ],
      status: [
        {
          label: "待支付",
          value: 0,
        },
        {
          label: "已支付",
          value: 1,
        },
        {
          label: "已使用",
          value: 2,
        },
        {
          label: "已取消",
          value: -1,
        },
        {
          label: "退款中",
          value: -2,
        },
        {
          label: "已退款",
          value: -3,
        },
        {
          label: "已核销",
          value: 3,
        },
        {
          label: "待使用",
          value: 4,
        },
        {
          label: "已预约",
          value: 5,
        },
      ],
      showReal: "",
    };
  },
  components: {
    AddOrUpdate,
  },
  watch:{
    dataList(newval, oldval) {
      if (newval != oldval) {
        this.he = "auto";
        setTimeout(() => {
          this.he = "calc(100vh - 270px)";
        }, 500);
      }
    },
  },
  created() {
    this.getScenicOptions();
  },
  methods: {
    getScenicOptions() {
      this.$http
        .get("scenic/isscenic/selectScenicList", {})
        .then(({ data: res }) => {
          if (res.msg == "success") {
            this.scenicOptions = res.data;
          }
        });
    },
  },
};
</script>

<style scoped>
.status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
}
</style>
